<template>
  <div class="basic-from" v-dialogDrag>
    <el-dialog
      custom-class="small-padding-dialog"
      :close-on-click-modal="false"
      :title="dialogInfo.title"
      :visible.sync="dialogVisible"
      :width="dialogInfo.width"
      @close="handleClosed"
    >
      <el-form
        :model="formData"
        ref="form"
        class="form-wrap"
        style="padding-top:0px;display: block"
        :rules="rules"
        label-position="top"
        label-width="40%"
      >
        <div v-for="formItem in formItemList" :key="formItem.prop">
          <el-form-item
            v-if="formItem.type==='input'"
            :label="formItem.label"
            :prop="formItem.prop"
          >
            <el-input v-model="formData[formItem.prop]" readonly placeholder="请输入" />
          </el-form-item>
          <el-form-item
            v-if="formItem.type==='select'"
            :label="formItem.label"
            :prop="formItem.prop"
          >
            <el-select clearable v-model="formData[formItem.prop]" placeholder="请选择">
              <el-option
                v-for="item in formItem.options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            v-if="formItem.type==='radio'"
            :label="formItem.label"
            :prop="formItem.prop"
            class="radio-line-height"
          >
            <el-radio-group v-model="formData[formItem.prop]" placeholder="请选择">
              <el-radio
                v-for="item in formItem.options"
                :key="item.key"
                :label="item.title"
                :value="item.label"
              />
            </el-radio-group>
          </el-form-item>
          <el-form-item
            v-if="formItem.type==='datetime'"
            :label="formItem.label"
            :prop="formItem.prop"
          >
            <el-date-picker
              value-format="yyyy-MM-dd"
              v-model="formData[formItem.prop]"
              type="date"
              placeholder="选择日期"
            ></el-date-picker>
          </el-form-item>
        </div>
      </el-form>
      <div slot="footer">
        <el-button v-if="type !== 'preview'" type="primary" @click="save">提交</el-button>
        <el-button @click="dialogVisible = false">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import moment from 'moment';
// import { changeQuestion, approvalQuestion, getApproveInfo } from "@/views/wy-operate/api/repair.js";
export default {
  props: {
    //弹窗信息
    dialogInfo: String,
    //form表单列表
    formItemList: Array,
    //验证规则
    rules: Array
  },
  name: "commonDialog",
  inject: ['initList'],
  data() {
    return {
      //弹窗类型，默认新增
      type: "add",
      //选中的物业
      radioId: "",
      //弹窗开关
      dialogVisible: false,
      //输入类型
      // input:文本搜索框;
      // dict: 字典筛选(下拉框展示),
      // radio: 单选框,
      // checkbox: 多选框,
      // select: 下拉框,
      // date: 日期, 
      // daterange: 日期区间,
      // datetime: 时间日期,
      // datetimerange: 时间日期区间,
      // numberRange: 数字区间

      // 表单项
      formData: {
        a: '', b: '', c: '', d: '', e: '', f: '', g: '', h: '', i: '', j: '', k: '', l: '', m: ''
      },
      // 校验
      rules: {
        // initiator: [{ required: true, message: "上报人不能为空", trigger: "blur" }],
        // initiateTime: [{ required: true, message: "上报时间不能为空", trigger: "blur" }],
        // propertyName: [{ required: true, message: "物业名称不能为空", trigger: "blur" }],
        // problemDesc: [{ required: true, message: "问题描述不能为空", trigger: "blur" }],
      },
    }
  },
  computed: {
    // 判断是否只读
    isReadonly() {
      return ["preview", "approval"].includes(this.type);
    },
    isQualifieds() {
      return []
    }
  },
  methods: {
    //开启弹窗
    async show({ type, data = {} }) {
      console.log(123)
      // if (['preview', 'edit', 'approval'].includes(type)) {
      //   const res = await this.http(`/api/repairbill/${data.billId}`)
      //   this.formData = type === 'approval' ? { ...this.formData, ...this.approvalForm, ...res.data.data } : { ...this.formData, ...res.data.data };
      //   this.$nextTick(() => {
      //     this.$refs.upload && this.$refs.upload.getFiles(data.billId)
      //   })
      //   // 获取审批结果信息
      //   data.billStatus && this.getStatus(data.billId)
      // }
      this.type = type;
      this.dialogVisible = true;
    },
    // 获取审批相关信息
    getStatus(billId) {
      getApproveInfo(billId).then(res => {
        const { records } = res.data.data
        if (records.length) {
          this.approvalForm = {
            ...records[0],
            result: this.formData.billStatus == 11 ? '1' : '0'
          }
        }
        this.approvalList = records
      })
    },
    // 提交新增
    async save() {
      try {
        const valid = await this.$refs.dialogForm.validate();
        if (!valid) return;
        if (this.type === 'approval') {
          let { result, approveContent, approvePerson } = this.formData;
          let params = {
            approveContent,
            approvePerson,
            approveTm: moment().format('YYYY-MM-DD hh:mm:ss'),
            billId: this.formData.billId,
          }
          approvalQuestion(params, result).then((res) => {
            if (res.data.code == 0) {
              this.$message.success(`${this.dialogTitle}成功!`);
              this.initList({ keyword: '', current: 1 })
              this.dialogVisible = false;
            } else {
              this.$message.error(res.data.msg)
            }
          });
        } else {
          this.$refs.upload.submit('repairQuestion', this.formData.billId);
        }
      } catch (error) {
        //console.log(error)
      }

    },
    // 上传成功
    async onSuccess(response, file, fileList) {
      let params = this.type == 'add' ? { ...this.formData, billId: response.data } : this.formData
      const res = await changeQuestion(params, this.type)
      if (res.data.code == 0) {
        this.$message.success(`${this.dialogTitle}成功!`);
        this.initList({ keyword: '', current: 1 })
        this.dialogVisible = false;
      } else {
        this.$message.error(res.data.msg)
      }
    },
    // 选择物业名称
    chooseProperty() {
      this.$refs.propertyChoose.show("question");
    },
    // 监听物业改变
    handlePropertyChange(data) {
      this.formData = {
        ...this.formData,
        address: data.address,
        propertyName: data.propertyName,
        roomId: data.roomId,
        propertyType: data.propertyType
      };
    },
    // 获取审批状态名称
    getStatusName(status = this.formData.billId) {
      return {
        '10': '待审核',
        '11': '待审核',
        '12': '审核通过',
        '13': '审核不通过',
        '14': '验收通过',
        '15': '验收未通过'
      }[status] || ''
    },
    // 弹窗关闭还原
    handleClosed() {
      this.uploadFileList = []
      let _formData = JSON.parse(JSON.stringify(this.formData))
      let _approvalForm = JSON.parse(JSON.stringify(this.approvalForm))
      for (let i in _formData) {
        _formData[i] = ''
      }
      for (let i in _approvalForm) {
        _approvalForm[i] = ''
      }
      this.formData = _formData
      this.approvalForm = _approvalForm
      this.approvalList = []
      this.$refs.dialogForm.resetFields()
    }

  },
};
</script>

<style lang="scss">
.basic-from {
  .form-wrap {
    .radio-line-height {
      label {
        line-height: 22px;
      }
    }
  }
}
</style>
